<template>
    <div 
        class="title"
        :class="className"
        :style="{
            backgroundColor: bgColor,
            textAlign: styleValue === '传统' ? align : ''
          }">
        <h4>
            {{ title ? title : '[编辑标题名]' }}
            <span v-if="styleValue === '传统'">-<a
                    :href="data.list[0].url ? data.list[0].url : 'javascript:;'">{{ urlTitle ? urlTitle : '[链接名]' }}
                </a>
            </span>
            <span v-if="styleValue === '精简'">
                <a :href="data.list[0].url ? data.list[0].url : 'javascript:;'">
                    {{ urlTitle ? urlTitle : '[链接名]' }}
                    <i-icon class="icon" type="ios-arrow-right"></i-icon>
                </a>
            </span>
        </h4>
        <p v-if="styleValue === '传统'">{{ bDate ? dateTime : fitTitle }}</p>
        <p v-if="styleValue === '微信'">
            <span v-if="dateTime">{{ dateTime }}</span>
            <span v-if="author">{{ author }}</span>
            <a
                :href="data.list[0].url ? data.list[0].url : 'javascript:;'">{{ urlTitle ? urlTitle : '[链接名]' }}
            </a>
        </p>
    </div>
</template>

<script>
// strPlus
import StrPlus from '@/utils/str-plus'
export default {
    name: 'ec-title',
    props: ['data'],
    data() {
        return {}
    },
    computed: {
        title() {
            return this.data.allValue.title
        },
        fitTitle() {
            return this.data.allValue.fitTitle
        },
        dateTime() {
            return this.data.allValue.dateTime
        },
        author() {
            return this.data.allValue.author
        },
        bgColor() {
            return this.data.allValue.bgColor
        },
        list() {
            return this.data.list
        },
        urlTitle() {
            return StrPlus.trim({ s: this.list[0].title })
        },
        bDate() {
            return this.data.bDate
        },
        styleValue() {
            return this.data.styleValue
        },
        positionValue() {
            return this.data.positionValue
        },
        /*
         * 根据 styleValue 得出 className
         */
        className() {
            switch (this.styleValue) {
                case '传统':
                    return 'tradition'
                case '微信':
                    return 'we-chat'
                case '精简':
                    return 'easy'
                default:
                    return 'tradition'
            }
        },
        /**
         * 对齐方式
         */
        align() {
            switch (this.positionValue) {
                case '居左':
                    return 'left'
                case '居中':
                    return 'center'
                case '居右':
                    return 'right'
                default:
                    return 'left'
            }
        }
    }
}
</script>

<style lang="less" scoped>
@import '~@/assets/style/mobile.less';
.title {
    padding: @gap;
    h4 {
        font-size: 1.46rem;
        margin-right: 0.4rem;
        font-weight: normal;
    }
    p {
        color: @subsidiary-color;
    }
    a {
        font-size: 1.2rem;
        margin-left: 0.4rem;
    }
}
.title.we-chat {
    span {
        margin-right: 0.2rem;
    }
    a {
        margin-left: 0;
    }
}
.title.easy{
    h4{
        a{
            display:flex;
            float: right;
            font-size: 1.3rem;
            color: @title-color-m;
        }
        .icon{
            font-size:1.8rem;
            margin-left: .3rem;
        }
    }
}
</style>